<template>
  <div>
    <el-pagination
      :currentPage="currentPage"
      :page-size="pageSize"
      :hide-on-single-page="hideOnSinglePage"
      :page-sizes="[10, 20, 50, 100,500]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>
<script lang="ts" setup>
// 说明：专门用于表格的分页框架
import {
  defineProps,
} from 'vue';

interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  currentPage?:string,
  pageSize?:number,
  total?:number,
  hideOnSinglePage?:boolean,
  changePageSize:(page: number)=>void, // 当每页数据显示数发生变化时触发的一个函数
  changePage:(page: number)=>void // 当页面发生变化时触发的一个函数
}
// const props = withDefaults(defineProps<Props>(), {
//   currentPage: 2,
//   pageSize: 20,
// });
const props = defineProps<Props>();
</script>
<style lang="scss" scoped>

</style>
